ChartIQ SDK Legacy Documentation - Tutorial: Custom Color Themes

Normally to modify the default color schemes (light/dark) you just make the adjustments on the CSS file. The light scheme will have a .'Light' qualifier and the dark will have a '.Dark' qualifier.

Example:

.Dark .stx-nav {border-color:#333;}

But it is possible to also create custom color schemes and load them programatically..

To do this, you will need to create a JSON representation of the color values for each custom theme, load them all, and activate them.

This is an example of what the themes JSON object would look like with 2 custom themes ( "test theme3" and "My Theme9")

var sampleTheme = {"enabledTheme":"My Theme9",    // name of the theme to enable by default
 "customThemes":                // all the themes go here
 {
  "test theme3":                // name of the theme
  {
   "baseTheme":"White",            // themes must be based on a default them and then overlayed with the custom colors. 
   "stx_candle_up":{"color":"rgb(140, 193, 118)","borderTopColor":"rgb(140, 193, 118)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_candle_down":{"color":"rgb(184, 44, 12)","borderTopColor":"rgb(184, 44, 12)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_candle_shadow":{"color":"rgb(46, 56, 59)","borderTopColor":"rgb(46, 56, 59)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_candle_shadow_up":
   {
           "color":"rgb(102, 102, 102)","borderTopColor":"rgb(102, 102, 102)",
           "backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"
   },
   "stx_candle_shadow_down":
   {
           "color":"rgb(102, 102, 102)","borderTopColor":"rgb(102, 102, 102)",
           "backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"
   },
   "stx_grid":{"color":"rgb(239, 239, 239)","borderTopColor":"rgb(239, 239, 239)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_grid_dark":{"color":"rgb(204, 204, 204)","borderTopColor":"rgb(204, 204, 204)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_xaxis_dark":{"color":"rgb(68, 68, 68)","borderTopColor":"rgb(68, 68, 68)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_mountain":{"color":"rgba(102, 202, 196, 0.00784314)","borderTopColor":"rgb(102, 202, 196)",
    "backgroundColor":"rgba(102, 202, 196, 0.498039)","border-left-color":"transparent"
   },
   "backgroundColor":"rgb(159, 106, 206)"
  },
  "My Theme9":                    // name of the theme
  {
   "baseTheme":"White",            // themes must be based on a default them and then overlayed with the custom colors. 
   "stx_candle_up":{"color":"rgb(140, 193, 118)","borderTopColor":"rgb(140, 193, 118)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_candle_down":{"color":"rgb(184, 44, 12)","borderTopColor":"rgb(184, 44, 12)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_candle_shadow":{"color":"rgb(46, 56, 59)","borderTopColor":"rgb(46, 56, 59)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_candle_shadow_up":{
           "color":"rgb(102, 102, 102)","borderTopColor":"rgb(102, 102, 102)",
           "backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"
   },
   "stx_candle_shadow_down":
   {
           "color":"rgb(102, 102, 102)","borderTopColor":"rgb(102, 102, 102)",
           "backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"
   },
   "stx_grid":{"color":"rgb(239, 239, 239)","borderTopColor":"rgb(239, 239, 239)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_grid_dark":{"color":"rgb(204, 204, 204)","borderTopColor":"rgb(204, 204, 204)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_xaxis_dark":{"color":"rgb(68, 68, 68)","borderTopColor":"rgb(68, 68, 68)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_mountain":{"color":"rgba(102, 202, 196, 0.00784314)","borderTopColor":"rgb(102, 202, 196)",
    "backgroundColor":"rgba(102, 202, 196, 0.498039)","border-left-color":"transparent"
   },
   "backgroundColor":"rgb(101, 101, 101)"
  }
 }
}

To load all the themes at once use the following method:

// load an entire of themes form a JSON object, and automatically enable the "enabledTheme" as indicated in the object.
STX.ThemeManager.setThemes(JSON.parse(sampleTheme), stxx);

// add/update names of the themes on the themes menu 
STX.ThemeManager.themesToMenu(STX.ThemeManager.el, STX.ThemeManager.el2, STX.ThemeManager.stx, STX.ThemeManager.storageCB);

To add a new theme to the existing list use the following method:

// add the theme object to the ThemeManager
STX.ThemeManager.themes.customThemes["test theme3"]= {
   "baseTheme":"White",            // themes must be based on a default them and then overlayed with the custom colors. 
   "stx_candle_up":{"color":"rgb(140, 193, 118)","borderTopColor":"rgb(140, 193, 118)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_candle_down":{"color":"rgb(184, 44, 12)","borderTopColor":"rgb(184, 44, 12)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_candle_shadow":{"color":"rgb(46, 56, 59)","borderTopColor":"rgb(46, 56, 59)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_candle_shadow_up":
   {
           "color":"rgb(102, 102, 102)","borderTopColor":"rgb(102, 102, 102)",
           "backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"
   },
   "stx_candle_shadow_down":
   {
           "color":"rgb(102, 102, 102)","borderTopColor":"rgb(102, 102, 102)",
           "backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"
   },
   "stx_grid":{"color":"rgb(239, 239, 239)","borderTopColor":"rgb(239, 239, 239)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_grid_dark":{"color":"rgb(204, 204, 204)","borderTopColor":"rgb(204, 204, 204)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_xaxis_dark":{"color":"rgb(68, 68, 68)","borderTopColor":"rgb(68, 68, 68)","backgroundColor":"rgba(0, 0, 0, 0)","border-left-color":"transparent"},
   "stx_mountain":{"color":"rgba(102, 202, 196, 0.00784314)","borderTopColor":"rgb(102, 202, 196)",
    "backgroundColor":"rgba(102, 202, 196, 0.498039)","border-left-color":"transparent"
   },
   "backgroundColor":"rgb(159, 106, 206)"
};

// enable the theme
STX.ThemeManager.enableTheme(stx, "test theme3");

// add/update names of the themes on the themes menu 
STX.ThemeManager.themesToMenu(STX.ThemeManager.el, STX.ThemeManager.el2, STX.ThemeManager.stx, STX.ThemeManager.storageCB);

See STX.ThemeManager for additional details.

Search results